<style scoped>
.a1 {
  height: 1100px;
  width: 700px;
  margin-left: 750px;
  border-radius: 10px;
  box-sizing: border-box;
  position: absolute;
  z-index: 0;

}

.head1 {
  height: 50px;
  color: white;
  border-radius: 10px;
  box-sizing: border-box
}

.head2 {
  position: absolute;
  height: 100px;
  color: white;
  font-size: 30px;
  box-sizing: border-box;
}

.head3 {
  position: absolute;
  top: 150px;
  height: 350px;
  color: white;
  box-sizing: border-box;
}

.horizontal-texts {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  font-size: 20px;
  color: gray;
  margin-left: 100px;
}

.horizontal-texts2 {
  position: absolute;
  margin-top: 80px;
  z-index: 3;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  font-size: 20px;
  color: gray;
}

.bai {
  position: absolute;
  top: 130px;
  height: 210px;
  width: 680px;
  margin-left: 10px;
  background-color: white;
  border-radius: 10px;
  display: flex;
  justify-content: space-around;
  font-size: 20px;
  color: gray;
}

.head4 {
  position: absolute;
  z-index: 3;
  height: 700px;
  width: 100%;
  margin-top: 460px;
  background-color: whitesmoke;
  display: flex;
  justify-content: space-around;
  font-size: 20px;
  color: #353535;
  box-sizing: border-box;
}

.product {
  margin-top: 70px;
  width: 45%;
  height: 400px;
  background-color: white;
  border-radius: 10px;
  padding: 10px;
}

.product img {
  width: 100%;
  height: 300px;
}

.description {
  display: block;
  text-align: left;
}

.price {
  margin-top: 30px;
  color: #f00;
  font-weight: bold;
}

</style>
<template>
  <div class="a1">
    <div class="head1"><img src="../assets/img.png" width="700px" height="50px" style="border-radius: 10px"></div>
    <div class="head2">
      <van-icon name="arrow-left" style="position: absolute;left: 20px;top: 20px;font-size: 35px;color: white"
                @click="wd()"/>
      <span style="position: absolute; top: 13px;left: 300px;font-size: 30px;color: white">我的订单</span>
      <span
          style="position: absolute;right: 10px;top: 15px;font-size: 20px;border-radius: 10%;background: gray;padding: 10px;"><van-icon
          name="shop-o"/>我的橱窗</span>
    </div>
    <div class="head3">
      <div class="horizontal-texts">
        <div style="margin-right: 40px;margin-bottom: 20px;width: 100px;">购物车
          <p style="font-size : 30px;color: white;margin-left: 40px;">3</p></div>
        <div
            style="padding-left: 40px; padding-right: 40px;height: 70px; border-left: 1px solid gray;margin-bottom: 20px;width: 100px;">
          收藏
          <p style="font-size : 30px;color: white;margin-left: 36px;">20</p></div>
        <div style="margin-left: 30px;margin-bottom: 20px;width: 100px;">我的地址
          <p style="font-size : 30px;color: white;margin-left: 36px;">
            <van-icon name="location - outline" size="30"></van-icon>
          </p>
        </div>
      </div>
      <div class="bai">
        <p style="position: absolute;left: 30px;color:#353535;font-size: 25px;">
          我的订单 <span style="color: #353535;margin-left: 450px;"> 查看<van-icon name="arrow"/></span>
        </p>
        <div class="horizontal-texts2">
          <div style="margin-right: 40px;width: 100px;">
            <van-icon name="paid" size="60"/>
            <p style="margin-left: 20px;">待支付</p></div>
          <div style="margin-right: 40px;width: 100px;">
            <van-icon name="tosend" size="60"/>
            <p style="margin-left: 20px;">待发货</p></div>
          <div
              style="padding-left: 40px; padding-right: 40px;height: 70px;width: 100px;">
            <van-icon name="logistics" size="60"/>
            <p style="margin-left: 20px;">待收货</p></div>
          <div style="margin-left: 30px;width: 100px;">
            <van-icon name="description-o" size="60"/>
            <p style="margin-left: 20px;">待评价</p></div>
        </div>
      </div>
    </div>
    <div class="head4">
      <p style="position: absolute;left: 30px;color:#353535;font-size: 25px;">
        我的足迹 <span style="color: #353535;margin-left: 450px;"> 全部<van-icon name="arrow"/></span>
      </p>
      <div class="product">
        <div style="height: 300px;">
        <img src="product - placeholder.jpg" alt="Product Image">
        </div>
        <span  class="description">未来感智能声控台灯5种色调 高颜值</span>
        <p class="price" style="font-size: 25px;margin-top: 10px;">¥ 28.8<span style="color: #090;margin-left: 150px;font-weight: normal;font-size: 19px;"> 已售289</span></p>
      </div>
      <div class="product">
        <div style="height: 300px;">
          <img src="product - placeholder.jpg" alt="Product Image">
        </div>
        <span class="description">颜值超高未来感智能声控灯3种颜色</span>
        <p class="price" style="font-size: 25px;margin-top: 10px;">¥ 28.8<span style="color: #090;margin-left: 150px;font-weight: normal;font-size: 19px;"> 已售384</span></p>
      </div>
    </div>
  </div>

</template>

<script>
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);
export default {
  data() {
    return {
      active: 0,
    }
  },
  methods: {
    wd() {
      this.$router.push('/wd')
    }
  },

  created() {

  }
}
</script>

